<script lang="jsx">
import { clueServer } from '@/api/clue'
import CRUD from '@/components/CRUD/index.vue'
import Transfer from './components/Transfer.vue'
import SingOrder from './components/SingOrder.vue'
import ClueRecordTimeLine from './components/ClueRecordTimeLine.vue'
import ClueTag from './components/ClueTag.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

export default {
  components: {
    CRUD,
  },
  setup() {
    const userStore = useUserStore()
    const columns = [
      { label: '编号', prop: 'clue_id' },
      { label: '公司名称', prop: 'company_name', minWidth: '120px' },
      { label: '项目名称', prop: 'community_name', minWidth: '120px' },
      { label: '联系人姓名', prop: 'contact_name', minWidth: '120px' },
      { label: '联系人手机号', prop: 'contact_mobile', minWidth: '120px' },
      { label: '来源', prop: 'source', minWidth: '80px' },
      { label: '案件原因', prop: 'case_reason', minWidth: '100px' },
      {
        label: '是否撤场',
        prop: 'is_back',
        minWidth: '100px',
        render: (row) => <span>{row.is_back ? '是' : '否'}</span>,
      },
      {
        label: '线索标签',
        prop: 'tag',
        minWidth: '100px',
        render: (row) => <ClueTag tag={row.tag} />,
      },
      { label: '备注', prop: 'remark', minWidth: '160px' },
      { label: '上次跟进时间', prop: 'last_trace_date', minWidth: '160px' },
      { label: '约访次数', prop: 'visit_times_count', minWidth: '100px' },
      {
        label: '签单状态',
        prop: 'is_success',
        minWidth: '100px',
        render: (row) => <span>{row.is_success ? '已签单' : '未签单'}</span>,
      },
    ]
    if (userStore.userInfo?.is_market_manager) {
      columns.push({
        label: '跟进人',
        prop: 'user_name',
        minWidth: '100px',
      })
    }

    const filters = [
      { key: 'keyword', type: 'input', props: { class: '!w-80', placeholder: '请输入姓名/联系人/物业名称/电话' } },
      { key: 'is_public', value: false, },
    ]
    const createForm = [
      {
        label: '公司',
        key: 'company_name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入公司' },
      },
      {
        label: '小区',
        required: true,
        key: 'community_name',
        type: 'input',
        props: { placeholder: '请输入小区' },
      },
      {
        label: '联系人姓名',
        key: 'contact_name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入联系人姓名' },
      },
      {
        label: '电话',
        key: 'contact_mobile',
        type: 'input',
        required: true,
        props: { placeholder: '请输入电话' },
      },
      {
        label: '线索来源',
        key: 'source',
        type: 'radio',
        required: true,
        props: { placeholder: '请选择线索来源' },
        defaultValue: '陌拜',
        options: [
          { label: '陌拜', value: '陌拜' },
          { label: '转介绍', value: '转介绍' },
          { label: '渠道', value: '渠道' },
        ],
      },
      {
        label: '案由',
        key: 'case_reason',
        type: 'radio',
        required: true,
        props: { placeholder: '请选择案由' },
        defaultValue: '物业费',
        options: [
          { label: '物业费', value: '物业费' },
          { label: '供暖费', value: '供暖费' },
          { label: '其他', value: '其他' },
        ],
      },
      {
        label: '是否撤场',
        key: 'is_back',
        type: 'radio',
        required: true,
        props: { placeholder: '请选择是否撤场' },
        defaultValue: false,
        options: [
          { label: '否', value: false },
          { label: '是', value: true },
        ],
      },
      {
        label: '客户标签',
        key: 'tag',
        type: 'radio',
        required: true,
        props: { placeholder: '请选择客户标签' },
        defaultValue: 'A',
        options: [
          { label: 'A', value: 'A' },
          { label: 'B', value: 'B' },
          { label: 'C', value: 'C' },
          { label: 'D', value: 'D' },
        ],
      },
      {
        label: '备注',
        key: 'remark',
        type: 'input',
        props: { placeholder: '请输入备注', type: 'textarea' },
      },
    ]
    const editForm = createForm.filter((item) => item.key !== 'tag')


    const dialogTitle = ref('')
    const visible = ref(false)
    const info = ref(null)
    const isComponentName = ref('Transfer')
    //查询线索记录
    const onOpenDialog = (row, title, name) => {
      isComponentName.value = name
      dialogTitle.value = title
      info.value = row
      visible.value = true
    }
    const onClose = () => {
      visible.value = false
    }

    const showRecord = ref(false);
    const onRecord = (row) => {
      info.value = row
      showRecord.value = true
    }

    const curdRef = ref()
    const getTableData = (keepPage) => {
      curdRef.value.getTableData(keepPage)
    }

    const canHandle = (row) => !row.is_success
    return () => (
      <CRUD
        ref={curdRef}
        title="线索"
        rawKey="clue_id"
        server={clueServer}
        columns={columns}
        filters={filters}
        createForm={createForm}
        editForm={editForm}
        editable={canHandle}
        deleteable={canHandle}
        fixedColWidth="220px"
        v-slots={{
          handler: ({ row }) => (
            <>
              <el-button
                type="primary"
                link
                onClick={() => onOpenDialog(row, row.is_success ? '签单详情' : '签单', 'SingOrder')}
              >
                {row.is_success ? '签单详情' : '签单'}
              </el-button>
              <el-button
                type="primary"
                link
                onClick={() => onRecord(row)}
              >
                跟进记录
              </el-button>
              {!row.is_success && <el-button
                type="primary"
                link
                onClick={() => onOpenDialog(row, '转让线索', 'Transfer')}
              >
                转让线索
              </el-button>}
            </>
          ),
          dialog: () => (
            <>
              <el-dialog
                modelValue={visible.value}
                title={dialogTitle.value}
                width="500px"
                onUpdate:modelValue={onClose}
                destroy-on-close
              >
                {isComponentName.value == 'Transfer' && (
                  <Transfer onClose={onClose} info={info.value} onSuccess={getTableData} />
                )}
                {isComponentName.value == 'SingOrder' && (
                  <SingOrder onClose={onClose} info={info.value} onSuccess={getTableData} />
                )}
              </el-dialog>

              <el-drawer
                title="跟进记录"
                modelValue={showRecord.value}
                width="500px"
                onUpdate:modelValue={() => (showRecord.value = false)}
                destroy-on-close
              >
                <ClueRecordTimeLine clueId={info.value?.clue_id} onSuccess={getTableData} />
              </el-drawer>
            </>
          ),
        }}
      ></CRUD>
    )
  },
}
</script>
